<template>
  <div class="album">
    <ContentList title="'米小圈' 相关的专辑">
      <template #title>
        <van-dropdown-menu active-color="#f86442">
          <van-dropdown-item :title="albumCategoryList[currentIndex]?.title||'全部'" ref="sortRef">
            <div class="sort">
              <div 
                @click="onSort(-1,0)" 
                :class="currentIndex==-1 && 'active'"
              >全部</div>

              <div 
                v-for="(item,index) in albumCategoryList"
                :key="item.id"
                @click="onSort(index as number,item.id)" 
                :class="currentIndex==index && 'active'"
              >{{ item.title }}</div>
              
            </div>
          </van-dropdown-item>
          <van-dropdown-item @change="clickSort2" v-model="value2" :options="option2" />
          <van-dropdown-item @change="clickSort3" v-model="value3" :options="option3" />
        </van-dropdown-menu>
      </template>

      <template #default>
        <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
          @load="onLoad">
          <ContentItem v-for="contentItem in albumList" :key="contentItem.albumInfo.id"
            :contentItem="contentItem.albumInfo"></ContentItem>
        </van-list>
      </template>
    </ContentList>

  </div>
</template>

<script setup lang="ts">
import ContentList from './ContentList/ContentList.vue'
import ContentItem from './ContentItem/ContentItem.vue'
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { _reqSearchResult,_getAlbumCategoryList } from '../../../api/serach';
import { reqSearchResultParamsType } from '../../../api/serach/type';
import { AnyObjType } from '../../charts/api/chartsApi';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { watch } from 'vue';
const $route = useRoute()

const props = defineProps<{
  kw: string
}>()

/* 筛选列表 */
const sortRef = ref()
const value2 = ref(0);
const value3 = ref(0);

/* 点击分类item */
const currentIndex = ref(-1)
const onSort = (index:number,id:number)=>{
  sortRef.value.toggle(false);
  params.category_id = id||'';
  params.page = 1;
  albumList.value = [];
  currentIndex.value = index;
  getAlbumData(params)
}

/* 点击 筛选 */
const clickSort2 = (val:number)=>{
  params.condition = option2[val].condition;
  params.page = 1;
  albumList.value = [];
  getAlbumData(params)
}
const clickSort3 = (val:number)=>{
  params.is_paid = option3[val].is_paid;
  params.paidFilter = option3[val].paidFilter;
  params.page = 1;
  albumList.value = [];
  getAlbumData(params)
}

const option2 = [
  { text: '相关度', value: 0 ,condition:'relation'},
  { text: '最多播放', value: 1,condition:'play' },
  { text: '最新上传', value: 2 ,condition:'recent'},
];
const option3 = [
  { text: '全部', value: 0 ,is_paid: '',paidFilter:false},
  { text: '免费', value: 1 ,is_paid: false,paidFilter:true},
  { text: '付费', value: 2 ,is_paid: true,paidFilter:true},
];



/* ------------------------------------- */
const albumList = ref<AnyObjType[]>([])
const albumCategoryList = ref<AnyObjType>([])

let params = reactive<reqSearchResultParamsType>({
  kw: props.kw,
  core: 'all',
  page: 1,
  rows: 20,
  condition: '',
  paidFilter: false,
  is_paid: ''
});

/* 分页数据 */
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  getAlbumData(params)
}

onMounted(() => {
  getAlbumData(params);
  getAlbumCategoryList();
})

watch($route,(nval)=>{
  params = {
    kw: nval.params.kw as string,
    core: 'all',
    page: 1,
    rows: 20,
    condition: '',
    paidFilter: false,
    is_paid: false
  }
  albumList.value = [];
  currentIndex.value = -1;
  getAlbumData(params)
})

//请求专辑列表数据的函数

const getAlbumData = async (params: reqSearchResultParamsType) => {
  try {
    loading.value = true;
    let res = await _reqSearchResult(params);
    if (res.ret == 0) {
      if (res.data.albumViews.albums.length > 0) {
        if (res.data.trackViews.tracks.length < params.rows) {
          finished.value = true;
        }
        albumList.value.push(...res.data.albumViews.albums);
        params.page++;
        loading.value = false;
      } else {
        //代表一定没有数据
        finished.value = true;
      }
    }
  } catch (error) {
    console.log(error);
    loading.value = false;

  }
}

// 请求专辑列表分类数据
const getAlbumCategoryList = async ()=>{
  try {
    let res = await _getAlbumCategoryList();
    if(res.ret == 0) {
      albumCategoryList.value = res.data;
    }
  } catch (error) {
    console.log(error);
    
  }
}

</script>

<style scoped lang="less">
.album {
  padding-right: 10px;
}

/* 筛选列表样式 */
:deep(.van-dropdown-menu) {
  .van-dropdown-menu__bar {
    height: 40px;
  }

  span {
    font-size: 14px;
    color: #666;
  }

}

.sort{
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  div{
    margin-bottom: 10px;
    font-size: 14px;
    background-color: #eee;
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    &.active{
      color: #f86442;
      background-color: rgba(200, 79, 59, .2);
    }
  }
}
</style>